<template>
<div class="overall">
    <div>
        <el-carousel trigger="click" height="500px">
            <el-carousel-item v-for="(item,index) in imgdata" :key="index">
                <img :src="item.url">
            </el-carousel-item>
        </el-carousel>
    </div>
    <div>
        <el-card class="hot_goods">
            <div class="hot_title">
                <h2>热门商品</h2>
            </div>
            <div class="hot_field">
                <mall-good v-for="(item,index) in hotgoods" :key="index" :msg=item></mall-good>
            </div>
        </el-card>

        <el-card class="hot_goods">
            <div class="hot_title">
                <h2>官方精选</h2>
            </div>
            <div class=official_field>
                <a class="cover-link">
                    <img src="../../assets/img/rec1.png">
                </a>
                <mall-good v-for="(item,index) in official" :key="index" :msg=item></mall-good>
            </div>
            <div>
                
            </div>
        </el-card>

        <el-card class="hot_goods">
            <div class="hot_title">
                <h2>共享精选</h2>
            </div>
            <div class="share_field">
                <a class="cover-link">
                    <img src="../../assets/img/rec2.png">                  
                </a>
                <share-good v-for="(item,index) in shares" :key="index" :msg=item></share-good>
            </div>
        </el-card>
        
    </div>
</div>
</template>

<script>
import mallGood from '../../components/mallGood.vue'
import img1 from '../../assets/img/img1.png'
import img2 from '../../assets/img/img2.png'
import img3 from '../../assets/img/img3.png'
import ShareGood from '../../components/shareGood.vue'
export default {
    components:{
        mallGood,
        ShareGood
    },
   data()
   {
       return{
       hotgoods:[],
       official:[],
       shares:[],
       brand:[],
       hotIds:['1415567842320977920','1414873807973388288'],
       officialIds:['1414872032411258880','1414872440068247552','1415589053352513536',
       '1415588535825731584','1415594811142049792','1415594217127940096'],
       shareIds:['1416092733323481088','1416098812170211328','1416099179784179712','1416099472064253952','1416101047516139520'],
           imgdata:[
               {
               url:img1
               },
                {
               url:img2
                },
                {
               url:img3
                }
           ]
       }
   },
   methods:{
        getHotGoods(){
            var that=this;
           this.hotIds.forEach(async (id)=>{
               const {data:res}=await that.$http.get('rent/rentalGoods/findByID/'+id)
            console.log(res)
           that.hotgoods.push(res.data)
           })           
        },
        getOfficialGoods(){
            var that=this;
           this.officialIds.forEach(async (id)=>{
               const {data:res}=await that.$http.get('rent/rentalGoods/findByID/'+id)
            console.log(res)
           that.official.push(res.data)
           })
                   
        },
        async getShareGoods(){
            var that=this;
           this.shareIds.forEach(async (id)=>{
               const {data:res}=await that.$http.get('rent/shareGoods/findByID/'+id)
            console.log(res)
           that.shares.push(res.data)
           })
          /*const{data:res}=await this.$http.get('rent/shareGoods/findByPage/10/1');
           this.shares=res.data.data;*/            
        }

   },
   created()
   {
       this.getHotGoods();
       this.getOfficialGoods();
       this.getShareGoods();
       console.log(this.hotgoods)
   }
}
</script>

<style lang="less" scoped>

/deep/.el-card__body
{
    padding:0;
}
.el-carousel
{
    width:1200px;
    margin:20px auto;
    img{
        height:100%;
        width:100%;
    }
}
.hot_field
{
    display: flex;
    .good-item
    {
        width:600px;
    }
}
.official_field,.share_field
{
    display: flex;
    flex-wrap: wrap;
    .good-item
    {
        width:25%;
    }
    .cover-link
    {
        width:50%;
        height:400px;
        cursor: pointer;
        transition: all .5s;
        img
        {
            width:100%;
            height:400px;
        }
        &:hover {
        transform: translateY(-3px);
        box-shadow: 1px 1px 20px #999;

        }
    }
}
.hot_goods
{
    width:1200px;
    margin-bottom: 30px;
    margin-left:auto;
    margin-right: auto;;
    overflow: hidden;
    background: #fff;
    padding:0;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    border-color: rgba(0,0,0,.14);
    box-shadow: 0 3px 8px -6px rgb(0 0 0 / 10%);
    .hot_title
    {
        padding-left: 30px;
    position: relative;
    z-index: 10;
    height: 60px;
    padding: 0 10px 0 24px;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
    background: #f3f3f3;
    background: linear-gradient(#fbfbfb,#ececec);
    line-height: 60px;
    font-size: 18px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2
    {
       font-size: 18px;
     font-weight: 400;
    color: #626262;
     display: inline-block 
    }
    }
}
</style>